<template>
  <div class="message-content info-content-img" :class="{ preHeight: preHeight }">
    <el-image
      class="msg-img"
      fit="contain"
      :src="msgInfo.messageContent.url"
      @click.stop="imagePreview"
      @load="load"
    ></el-image>
  </div>
</template>

<script>
import ChatMixin from '@src/modules/im/ChatMixin/index.js';

export default {
  name: 'image-message',
  mixins: [ChatMixin],
  props: {
    msgInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      preHeight: true,
    };
  },
  methods: {
    imagePreview() {
      const {fileName, fileSize, url, fileId = ''} = this.msgInfo.messageContent
      let previewFile = {
        id:fileId,
        url,
        fileSize:this.readablizeBytes(fileSize),
        fileName,
        name: fileName,
        downloadUrl:`/files/download?fileId=${fileId}`,
        fileType: 'image'
      }
      this.$previewElementImg(previewFile.url, [previewFile]);
    },
    load() {
      this.preHeight = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.info-content-img {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  background-color: #000000 !important;
  border-radius: 4px  !important;
  overflow: hidden;
  cursor: pointer;
  .msg-img {
    min-width: 100px;
    max-width: 140px;
    width: auto;
    height: auto;
    max-height: 200px;
    overflow: hidden;
    display: block;
  }
}
.preHeight {
  height: 160px !important;
}
</style>